<template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="item" @click="listHandler(index,item.id)" :class="[index == active ? 'active' : '']" v-for="(item, index) in list" :key="index"
            :title="item">
            <div class="num">{{ index + 1 }}</div>
            <div class="info">
                <p class="title">{{ item.title }}</p>
                <div class="info-details">
                    <div class="video"><span class="iconfont icon-shipin"></span>视频课</div>
                    <div class="time"><span class="iconfont icon-shijian"></span>{{ item.vtime }}</div>
                </div>
            </div>
        </div>
    </van-list>
</template>
<script setup>

import { ref } from 'vue';
import api from "../../api"
import md5 from "js-md5"

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const active = ref(0)
const type = ref(2)
const page = ref(1)
const emit = defineEmits(["onIDEvent"])
const props = defineProps({
    id:{
        type:[Number,String],
        default:0
    }
})

const onLoad = () => {
    api.getVideoList({
        id: props.id,
        type: type.value,
        page: page.value,
        verify: md5(props.id.toString() + page.value.toString() + type.value.toString())
    }).then(res => {
        loading.value = false;
        if (res.data.code == 400) {
            finished.value = true;
        }
        if (res.data.code === 200) {
            list.value = list.value.concat(res.data.data)
            // 累加page
            page.value++
        }
    })
};

const listHandler = (index,id) =>{
    active.value = index
    emit("onIDEvent",id)
}

</script>
<style scoped>
.item {
    margin: 15px;
    padding: 15px;
    background: #F6F7F8;
    overflow: hidden;
    clear: both;
    color: #333333;
}

.item .num {
    float: left;
    width: 5%;
    font-size: 16px;
}

.item .info {
    width: 92%;
    float: right;
    font-size: 16px;
}

.info-details {
    overflow: hidden;
    clear: both;
    margin-top: 10px;
}

.info-details div {
    float: left;
    font-size: 13px;
}

.info-details div span {
    font-size: 13px;
}

.info-details .time {
    margin-left: 20px;
}

.active {
    border: 1px solid #594094;
    border-radius: 5px;
    color: #594094;
}</style>